<script setup>
import { onMounted } from "vue";
import Header from "./components/Header.vue";
import BannerSection from "./components/BannerSection.vue";
import ProductList from "./components/Product/index.vue";
import BrandStory from "./components/BrandStory/index.vue";
import Footer from "./components/Footer.vue";

onMounted(() => {
  // 当窗口滚动时触发
  $(window).on("scroll", function () {
    // 获取当前窗口的滚动位置
    var scroll = $(window).scrollTop();

    // 如果滚动位置大于或等于80px，添加类名“nav-fixed”
    if (scroll >= 80) {
      $("#site-header").addClass("nav-fixed");
    } else {
      // 否则，移除类名“nav-fixed”
      $("#site-header").removeClass("nav-fixed");
    }
  });

  // 主导航的激活类添加和移除
  $(".navbar-toggler").on("click", function () {
    // 切换header的“active”类
    $("header").toggleClass("active");
  });

  // 文档准备就绪后执行
  $(document).on("ready", function () {
    // 如果窗口宽度大于991px，移除header的“active”类
    if ($(window).width() > 991) {
      $("header").removeClass("active");
    }
    // 监听窗口大小变化
    $(window).on("resize", function () {
      // 如果窗口宽度大于991px，移除header的“active”类
      if ($(window).width() > 991) {
        $("header").removeClass("active");
      }
    });
  });
  $(function () {
    $(".navbar-toggler").click(function () {
      $("body").toggleClass("noscroll");
    });
  });
});
</script>

<template>
  <Header />
  <BannerSection />
  <ProductList />
  <BrandStory />
  <Footer />
</template>

<style scoped></style>
